<template>
  <div>
    <Dropdown trigger="click" @on-click="selectLang">
      <a href="javascript:void(0)">
        {{ title }}
        <Icon :size="18" type="md-arrow-dropdown" />
      </a>
      <DropdownMenu slot="list">
        <DropdownItem v-for="(value, key) in localList" :name="key" :key="`lang-${key}`">{{ value }}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
export default {
	name: 'Language',
	props: {
		lang: String,
	},
	data() {
		return {
			langList: {
				'zh-CN': '语言',
				'zh-TW': '語言',
				'en-US': 'Lang',
			},
			localList: {
				'zh-CN': '中文简体',
				'zh-TW': '中文繁体',
				'en-US': 'English',
			},
		}
	},
	watch: {
		lang(lang) {
			this.$i18n.locale = lang
		},
	},
	computed: {
		title() {
			return this.langList[this.lang]
		},
	},
	methods: {
		selectLang(name) {
			this.$emit('on-lang-change', name)
		},
	},
}
</script>
